import React from 'react'
import { changeNav,tenantPush,getServiceinfo,getArea,
    getProvince,modifyServicer,getCity,getRegion } from '../../actions'
import { connect } from 'react-redux'
import { createForm } from 'rc-form'
import { List,InputItem ,WhiteSpace,Button,Picker,Toast} from 'antd-mobile'
import { ajaxGet,ajaxPut } from '../../common/wxajaxservice.js'
import styles from './../tenant.less'
import CSSModules from 'react-css-modules'
import hhistory from '../../history'

const Item = List.Item;

@CSSModules(styles, { allowMultiple: false })

class TenantPush extends React.Component {
    constructor( props ){
        super( props )
        this.state = {
            province:[],
            provinceName:'',
            city:[],
            cityName:"",
            region:[],
            regionName:"",
            area:{code:'',name:''},
            groupdetail:{}
        }

    }
	componentDidMount(){
	    this.props.tochangeNav({title:"开通新集团"})
        this.props.getProvince();
	    let groupdetail = JSON.parse(sessionStorage.getItem('Groupdetail'))
	    if(groupdetail){
            this.props.getCity(groupdetail.province);
            this.props.getRegion(groupdetail.city);
	    	this.setState({
                groupdetail:groupdetail,
                province:[groupdetail.province],
                city:[groupdetail.city],
                region:[groupdetail.region],
                area:{code:groupdetail.area,name:groupdetail.areaName}
			})

		}
	}
    componentWillUnmount(){
        sessionStorage.removeItem('Groupdetail')
    }
    modifyGroup() {
            this.props.form.validateFields(( error,value )=>{
                if( error ){
                    Toast.info('请填写必填项')
                    return
                }
                let data = {groupCode:this.state.groupdetail.groupCode, groupName:value.groupName
                    ,groupShortName:value.groupShortName,contactName:value.contactName,contactMobile:value.contactMobile
                    , contactEmail:value.contactEmail,area:this.state.area.code,address:value.address,remark:value.remark
                    ,province:this.state.province[0],
                    city:this.state.city[0],region:this.state.region[0],status:this.state.groupdetail.status}
                ajaxPut('/bd/group/'+this.state.groupdetail.groupCode,data).then( res=>{
                    if(res.code == 0){
                        Toast.success('修改'+res.msg,2,()=>{
                            hhistory.goBack()
                        })
                    }else{
                        Toast.fail(res.msg,2)
                    }
				})
            })
	}
    openGroup() {
        this.props.form.validateFields(( error,value )=>{
            if( error ){
                Toast.info('请填写必填项')
                return
            }
            this.props.tenantPush({ groupName:value.groupName
                ,groupShortName:value.groupShortName,contactName:value.contactName,contactMobile:value.contactMobile
                , contactEmail:value.contactEmail,area:this.state.area.name,address:value.address,remark:value.remark
                ,province:this.state.province[0],
                city:this.state.city[0],region:this.state.region[0],})
        })
	}
	render(){
        const { getFieldProps } = this.props.form
        const { locationInfo,getCity,getRegion } = this.props
		const groupdetail = this.state.groupdetail||{}
        return(
			<div>
				<div>
					<List>
						<InputItem
							styleName="am-list"
							{...getFieldProps('groupName',
								{
                                    initialValue:groupdetail.groupName,
									rules: [{required: true}]
								}
								)}
							clear
							placeholder="请填写集团名称"
							autoFocus
						>集团名称  <RedSpan /></InputItem>
						<InputItem
							styleName="am-list"
							{...getFieldProps('groupShortName',
								{
                                    initialValue:groupdetail.groupShortName,
								})}
							clear
							placeholder="请填写"
							autoFocus
						>简称</InputItem>

					</List>
				</div>
				<WhiteSpace />
				<div>
					<List>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('contactName',{ rules: [{required: true}],initialValue:groupdetail.contactName })}
							clear
							placeholder="必填"
							autoFocus
						>联系人  <RedSpan /></InputItem>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('contactMobile',{ rules: [{required: true}] ,initialValue:groupdetail.contactMobile})}
							clear
							placeholder="必填"
							autoFocus
						>手机号码  <RedSpan /></InputItem>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('contactEmail',{
                                initialValue:groupdetail.contactEmail
							})}
							clear
							placeholder="必填"
							autoFocus
							type="password"
						>邮箱</InputItem>
					</List>
				</div>
				<WhiteSpace />
				<div>
					<List>
					<Picker
						data={[
                            locationInfo.province
                        ]}
						title="选择省份"
						cascade={false}
						value = {locationInfo.province.length !== 0?this.state.province:[]}
						onChange={
                            v => {
                                getCity( v[0] );
                                ajaxGet( "dic/area/"+ v[0] ).then( res=> {console.log(res) ;this.setState({area:res.data})} );
                                this.setState( { city:[] ,province:v} )
                            }
                        }
					>
						<Item styleName="am-picker" arrow="down">
							所属省份
						</Item>
					</Picker>

					<Picker
						data={[
                            locationInfo.city
                        ]}
						// extra={ this.state.regionName ===''? groupdetail.regionName:this.state.regionName }
						title="选择城市"
						cascade={false}
						value = {locationInfo.city.length !== 0?this.state.city:[]}
						onChange={
                            v => {
                                // this.testy.next()
                                this.setState( { city:v,region:[]} )
                                getRegion( v[0] )
                            }
                        }
					>
						<Item styleName="am-picker" arrow="down" onClick={ () => {
                            //this.props.getCity( this.props.servicerInfo.province )
                        } }>
							所属城市
						</Item>
					</Picker>

					<Picker
						data={[
                            locationInfo.region
                        ]}
						title="选择行政区"
						cascade={false}
						value = {locationInfo.region.length !== 0?this.state.region:[]}
						onChange={
                            v => {
                                this.setState( { region:v} );
                            }
                        }
					>
						<Item styleName="am-picker" arrow="down" onClick={ () => {
                            // this.props.getRegion( this.props.servicerInfo.city )
                        } }>
							所属行政区
						</Item>
					</Picker>
					</List>
				</div>
				<WhiteSpace style={{background:'#f5f5f9'}} />
				<div style={{background:'#f5f5f9',paddingLeft:'0.3rem',fontSize:'0.28rem'}}>所属地区：{this.state.area.name}</div>
				<WhiteSpace style={{background:'#f5f5f9'}} />
				<div>
					<List>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('address',{ rules: [{required: true,message:'ssadasd'}], initialValue:groupdetail.address })}
							clear
							placeholder="必填"
							autoFocus
						>街道地址  <RedSpan /></InputItem>
						<InputItem
							styleName="am-list"
                            {...getFieldProps('remark',{initialValue:groupdetail.remark})}
							clear
							placeholder="必填"
							autoFocus
						>备注</InputItem>
					</List>
				</div>
				<WhiteSpace />
				<Button key="1" type="primary"  onClick={groupdetail?this.modifyGroup.bind(this):this.openGroup.bind(this)
				}>{groupdetail?'修改':'开通'}</Button>
			</div>
		)
	}
}
class RedSpan extends React.Component {
	render(){
		return (<span style={{color:'#ff4c4c'}}>*</span>)
	}
}
const mapStateToProps = ( state ) => ({
    locationInfo:state.locationInfo,

})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
    tenantPush: json => dispatch(tenantPush(json)),
    getServiceinfo:code => dispatch( getServiceinfo( code ) ),
    getArea:() => dispatch( getArea() ),
    modifyServicer:( code,data ) => dispatch( modifyServicer( code,data ) ),
    getProvince:() => dispatch( getProvince() ),
    getCity:code => dispatch( getCity(code) ),
    getRegion:code => dispatch( getRegion(code) ),
    storePush: json => dispatch(storePush(json))
})

export default createForm()(connect( mapStateToProps,mapDispatchToProps )( TenantPush ))